iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

JS 作品實戰應用 - Vue 電商網站系列 第 7

7. 最常見的 this - 物件的方法調用

  • 分享至 

  • xImage
  •  

this 在函式一開始就會自動產生,不需要宣告它,而一開始就指向全域,也就是 this:Window
https://ithelp.ithome.com.tw/upload/images/20200922/20121004nEfG7EKCve.jpg

案例 - 大約八成this皆為此指向方式

var myName='真心鎮大冒險';
function callName() {
    console.log(this.myName); //this指向全域,再從全域裡找到 myName 變數
}
callName();
// 輸出結果: 真心鎮大冒險

this 執行環境

應用在函式裡

function doSomething() {
    // ...
}
doSomething()
  • 執行環境 doSomething()
  • 全域執行環境

在函式裡 thie 是一個關鍵字,不需要宣告就自動存在,不管在全域環境或是在特定的函式都能調用 this ,
因為 this 在每個執行環境都會存在,很容易誤會 this 是指向函式。
函式本身提供的屬性有限,所以比較不會用 this 調用函式本身,而 this 通常會指向可以運用的物件
所以不要函式中的 this 會指向該函式。

this 基本觀念

  • 每個執行環境都有屬於自己的 this 關鍵字。
  • this 與函式如何宣告沒有關聯性,僅與呼叫方法有關。
  • 嚴格模式下,簡易呼叫會有很大的改變。

影響函式 this 的調用方式

  • 作為物件方法 ( 最常運用this的方法 )
  • 簡易呼叫 ( 絕大多數的呼叫方式 )
  • bind,apply,call 方法
  • new
  • DOM 事件處理器
  • 箭頭函式(ES6)

this 的用途

可以略過函式的定義方式,改成依據執行的方式來取用特定的物件。
https://ithelp.ithome.com.tw/upload/images/20200922/20121004YmcasfXIyb.jpg

this : 物件的方法調用(最常見的形式)

重點 :

  • this 與函式如何宣告沒有關聯性,僅與呼叫方法有關。
  • 物件的方法調用時,僅需要關注是在哪一個物件下呼叫(通常是前一個物件)。

https://ithelp.ithome.com.tw/upload/images/20200922/201210048czESqAaFW.jpg

範例

var myName='真心鎮大冒險';
function callName() {
    console.log(this, this.myName); //此時 this 以指向 family 的函式物件
}
var family = {
    myName:'小明家',
    callName: callName  //直接調用外層的 callName()
}
family.callName();
// 輸出結果: 小明家
  • 僅關注 this 是在哪一個物件被呼叫,呼叫 this 指向 family 物件。
  • 回去 family 裡找尋 myName ,找到為 myName:'小明家',

上一篇
6. 函式-參數
下一篇
8. ES6 - let、const
系列文
JS 作品實戰應用 - Vue 電商網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言